<template>
	<view class="bg">
		<u-navbar :is-back="true" title="就诊单详情" :background="{backgroundColor: '#00a8ff'}"></u-navbar>
		<view class="u-padding-left-26 u-p-r-26 u-margin-top-20 u-m-b-20 block">
			<view class="liP">
				<p>服务客户<text style="float: right;">{{detail.user_info?detail.user_info.nickname:""}}</text></p>
				<p>联系方式<text style="float: right;">{{detail.user_info?detail.user_info.mobile:""}}</text></p>
				<p>服务医院<text style="float: right;">{{detail.hospital?detail.hospital.title:""}}</text></p>
				<p>服务时间<text style="float: right;">{{$u.timeFormat(detail.reservetime, 'yyyy年mm月dd日 hh:MM')}}</text></p>
			</view>
		</view>
		<view class="u-p-26 u-margin-top-20 u-m-b-20 block">
			<view class="">
				<text>服务项目</text>
			</view>
			<view class="u-flex u-margin-top-10 u-margin-bottom-10">
				<view class="u-flex-1">
					<image :src="detail.items?ossHost+detail.items[0].image_id:''" mode=""
						style="width: 150rpx;border-radius: 10rpx;height: 150rpx;"></image>
				</view>
				<view class="u-flex-3">
					<p class="u-col-top">{{detail.items?detail.items[0].name:""}}</p>
					<br>
					<p>￥{{detail.items?detail.items[0].price:""}}</p>
				</view>
			</view>

		</view>
		<view class="block">
			<view class="liP">
				<p>订单状态
					<text style="float: right;" v-show="detail.show_status=='0'">待就诊</text><text style="float: right;"
						v-show="detail.show_status=='1'">进行中</text>
					<text style="float: right;" v-show="detail.show_status=='2'">已完成</text>
					<text style="float: right;" v-show="detail.show_status=='3'">已取消</text>
				</p>
				<p>预约金(¥{{detail.earnest_money}})
					<text style="float: right;" v-show="detail.pay_status==0">未支付</text>
					<text style="float: right;" v-show="detail.pay_status==1">支付完成</text>
					<text style="float: right;" v-show="detail.pay_status==2">部分付款</text>
					<text style="float: right;" v-show="detail.pay_status==3">部分退款</text>
					<text style="float: right;" v-show="detail.pay_status==4">全额退款</text>
				</p>
				<p>尾款(¥{{detail.final_payment}})<text
						style="float: right;">{{detail.final_payment_status?'待支付':'已支付'}}</text></p>
			</view>
		</view>
		<view class="block">
			<view class="liP">
				<p>订单创建时间<text style="float: right;">{{$u.timeFormat(detail.createtime, 'yyyy年mm月dd日 hh:MM')}}</text>
				</p>
				<p>订单编号<text style="float: right;">{{detail.order_bn}}</text></p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据对象
				detail: [],
				ossHost: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com',
			}
		},
		onLoad: function(e) {
			// 根据上个页面传入id区分加载
			this.getDetail(e.id);
		},
		methods: {
			// 传入id获取到院就诊单详情
			getDetail(id) {
				this.$apiToHos.detail({
					id: id
				}).then((res) => {
					console.log('request success', res);
					uni.showToast({
						title: res.data.code,
						icon: 'success',
						mask: true
					});
					this.detail = res.data.data;
				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.bg {
		background-color: #f3f4f5;
	}

	.liP p {
		line-height: 80rpx;
		border-bottom: #e5e5e5 1px solid;
	}

	.liP p:last-child {
		border-bottom: none;
	}

	.block {
		padding: 0 26rpx;
		margin: 26rpx 0;
		background-color: #FFFFFF;
	}
</style>
